<template>
  <div class="page-banner-list">
    <div class="page-banner-list__header">
      <!-- 删除选中 -->
      <el-button
        type="danger"
        :disabled="selectBannerIDS.length === 0"
        @click="handDeleteSelected"
      >
        删除选中
      </el-button>
      <!-- 跳转按钮 -->
      <el-button @click="$router.push('/banner/add')" type="success">
        <el-icon><CirclePlusFilled /></el-icon> <span></span>添加
      </el-button>
      <!-- 刷新按钮 -->
      <el-button type="primary" @click="fetchData">
        <el-icon><RefreshRight /></el-icon>
      </el-button>
    </div>
    <!-- 轮播图表格内容 -->
    <el-table :data="displayTableData" @selection-change="onSelectionChange">
      <el-table-column type="selection" label="序号 " width="180" />
      <el-table-column label="图片" width="180">
        <!-- 
          设置默认插槽内容
          提供有作用域插槽
            作用域插槽中有 row 这个数据，这个数据就是当前行的对象数据
         -->
        <template #default="scope">
          <!-- {{ scope.row }} -->
          <img :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" width="180" />
      <el-table-column prop="alt" label="描述" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <!-- 删除操作 -->
          <el-popconfirm
            title="您确定要删除吗?"
            @confirm="handleDelete(scope.row.bannerid)"
          >
            <template #reference>
              <el-button type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty><el-empty description="No Data" /></template>
    </el-table>
    <!-- 分页 -->
    <div class="page-banner-list__footer">
      <el-pagination
        v-show="tableData.length > 0"
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :total="tableData.length"
        v-model:current-page="page"
      />
    </div>
  </div>
</template>
<script>
import { getBannerData, delBanner } from "@/api/banner.js";
export default {
  name: "banner-list",
  data() {
    return {
      // 存放数据
      tableData: [],
      // 当前页
      page: 1,
      // 每页显示条数
      pageSize: 10,

      // 存放勾选数据ID的集合
      selectBannerIDS: [],
    };
  },
  computed: {
    displayTableData() {
      return this.tableData.slice((this.page - 1) * 10, this.page * 10);
    },
  },
  methods: {
    // 请求数据 fetchData
    fetchData() {
      getBannerData().then((data) => {
        console.log("====", data);
        // 将data.data 赋值给 tableData
        this.tableData = data.data;
      });
    },
    // 删除
    handleDelete(id) {
      console.log(id);
      delBanner(id).then((data) => {
        // 更新表格数据
        this.fetchData();
      });
    },
    handDeleteSelected() {
      console.log("handDeleteSelected");
      // 获取到选中的数据
      delBanner(this.selectBannerIDS).then((data) => {
        // 更新表格数据
        this.fetchData();
      });
    },

    /**
     * 勾选取消勾选的回调
     * abc Array 每一项就是勾选的数据对象
     */
    onSelectionChange(abc) {
      console.log(abc);
      this.selectBannerIDS = abc.map((item) => item.bannerid);
      // console.log(this.selectBannerIDS);
    },
  },
  // 页面一打开就加载
  mounted() {
    this.fetchData();
  },
};
</script>
<style lang="scss" scoped>
.page-banner-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  img {
    display: block;
    height: 100px;
  }
  &__header,
  &__footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-table {
    flex: 1;
  }
}
</style>
